<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./js/vue.js"></script>
    <div class="box">
        <ul>
            <li v-for="(item,index) in list" :key="index">
                <h3>{{item.content}}</h3>
                <div>{{item.date}}</div>
            </li>
        </ul>
        <div>
            <input type="text" v-model="msg">
            <button @click="submit">评论</button>
        </div>    
        <div>
            <h3>查询</h3>
            <!-- 需求：查询包含闫胜男的数据 -->
            <input type="text" v-model="searchInfo">
            <button v-on:click="search">查询</button>
        </div>    
        <div>
            <h3>改</h3>
            <input type="text" v-model="listIndex">
            <button @click="update">更改</button>
        </div>
        <div>
            <h2>删除</h2>
            <input type="text" v-model="listIndex">
            <button @click="del">删除</button>
        </div>
    </div>
    <script>
        /*
        需求：评论框
        数据结构 [{},{},{}]
        每一条数据都是一个对象 对象当中的数据 评论内容 评论的时间
        点击按钮 评论 就会往[{},{},{}]加入一个对象 push向后面插入数据 unshift在数组的前面插入
        */
        let vm=new Vue({
            el:'.box',
            data:{
                listIndex:0,
                searchInfo:'闫胜男',
                msg:'',
                list:[
                    {
                        content:'闫胜男在纠结你们为何老写我的名字？专利费呢',
                        data:Date.now()
                    },
                    {
                        content:'国庆节快过完了',
                        date:Date.now()
                    }
                ]
            },
            methods:{
                submit(){
                    console.log('事件绑定是否成功');
                    // 收集评论内容
                    console.log(this.msg);
                    // 将收集到的内容变为这种类型的对象{content, , date:}
                    let obj={};
                    obj.content=this.msg;
                    obj.date=Date.now();
                    console.log(obj);
                    // 将其插入到list当中 向首部插入unshift 向尾部添加push
                    this.list.unshift(obj);

                    // 增删改查


                    // 清空输入框
                    this.msg='';
                },
                // 查询 数组查询 总结复习数组的方法
                search(){
                    // find 作用：查询到符合条件的第一个值后返回 不管后面了 结束了
                    // filter 作用：筛选出符合条件的所有的
                    let result=this.list.filter((item,index)=>{
                        // return item.content当中包含闫胜男
                        return item.content.includes('闫胜男');
                    })
                    console.log(result);
                },
                // 改 数组的替换
                // 需求是 将闫胜男那条数据替换为 这书冷吗？
                update(){
                    let obj={};
                    obj.content='这书冷吗？';
                    obj.date=Date.now();
                    this.list.splice(this.listIndex,1,obj)
                },
                // 删除 数组的删除
                del(){
                    this.list.splice(this.listIndex,1);
                }
            }
        })
    </script>
</body>
</html>